<template>
    <el-container class="base_rate_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header" :isSearch="false"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter" />
                <vxe-table-template :data="dataList" :options.sync="tableOptions"
                                    @event="handleTableEvent" />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import baseExchangeRateApi from "@common/api/base/baseExchangeRateApi";
import BaseAssistApi from "@common/api/base/BaseAssistApi";

export default {
    name: "Rate",
    data() {
        let $this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            $this.getList();
                        },
                    },
                    {
                        id: "add",
                        icon: "fa fa-plus",
                        type: 'primary',
                        show: true,
                        permission: 'save_base_exchange_rate',
                        method: () => {
                            $this.addRow();
                        },
                    },
                    {
                        id: "addType",
                        icon: "fa fa-plus",
                        label: '增加币种',
                        type: 'primary',
                        show: true,
                        permission: 'save_base_exchange_rate',
                        method: () => {
                            $this.$router.push('/baseAssist');
                        },
                    },
                    {
                        id: "delete",
                        icon: "fa fa-trash-o",
                        type: 'danger',
                        show: true,
                        permission: 'del_base_exchange_rate',
                        method: () => {
                            $this.delRate(null, 'batch');
                        },
                    },
                    {
                        id: "save",
                        icon: "el-icon-check",
                        label: '保存',
                        type: 'warning',
                        show: true,
                        permission: 'save_base_exchange_rate',
                        method: () => {
                            $this.batchSaveOrUpdateRate();
                        },
                    },
                ],
            },
            dataList: [],
            typeList: [],
            tableOptions: {
                ref: 'RateTable',
                container: '.base_rate_container',
                multiSelect: true,
                columns: [
                    {
                        label: '人民币',
                        prop: 'name',
                        align: 'center',
                    },
                    {
                        label: '',
                        prop: 'equal',
                        align: 'center',
                        formatter: (row, column, scope) => {
                            return '=';
                        },
                    },
                    {
                        label: '汇率',
                        prop: 'exchange_rate',
                        align: 'center',
                        render(h, { row, column }) {
                            return h('el-input', {
                                props: {
                                    value: row[column.prop],
                                    type: 'text'
                                },
                                on: {
                                    input(value) {
                                        $this.$set(row, column.prop, value);
                                    },
                                }
                            });
                        }
                    },
                    {
                        label: '外币',
                        prop: 'currency_type',
                        align: 'center',
                        render(h, { row, column }) {
                            let existTypeList = $this.dataList.filter(item => $this.$utils.isNotEmpty(item.currency_type)).map(item => item.currency_type);
                            return h('el-select', {
                                props: {
                                    value: row.currency_type,
                                    clearable: true
                                },
                                on: {
                                    change(val) {
                                        $this.$set(row, column.prop, val);
                                    },
                                },
                            }, [
                                $this.typeList.filter(item => item.value === row.currency_type || existTypeList.indexOf(item.value) === -1).map(item => {
                                    return h("el-option", {
                                        props: {
                                            label: item.label,
                                            value: item.value,
                                        }
                                    })
                                })
                            ]);
                        }
                    },
                    {
                        label: '金额小数位数',
                        prop: 'exchange_digit',
                        align: 'center',
                        render(h, { row, column }) {
                            return h('el-input', {
                                props: {
                                    value: row[column.prop],
                                    type: 'text',
                                },
                                on: {
                                    input(value) {
                                        if (value > 4) value = 4;
                                        if (value < 0 || !value) value = 0;
                                        $this.$set(row, column.prop, value);
                                    },
                                },
                                directives: [//自定义指令
                                    {
                                        name: 'int',
                                    }
                                ],
                            });
                        }
                    },
                    {
                        label: '排序',
                        prop: 'sn',
                        align: 'center',
                        render(h, { row, column }) {
                            return h('el-input', {
                                props: {
                                    value: row[column.prop],
                                    type: 'text'
                                },
                                on: {
                                    input(value) {
                                        $this.$set(row, column.prop, value);
                                    },
                                }
                            });
                        }
                    },
                    {
                        label: '默认',
                        prop: 'is_default',
                        align: 'center',
                        render(h, { row, column }) {
                            return h('el-switch', {
                                props: {
                                    value: row[column.prop] === 1 ? true : false,
                                },
                                on: {
                                    change(value) {
                                        $this.$set(row, column.prop, value === true ? 1 : 0);
                                    },
                                }
                            });
                        }
                    }
                ],
                operates: {
                    list: [
                        {
                            id: 'info',
                            icon: 'fa fa-plus',
                            type: 'primary',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '添加',
                            },
                            permission: 'save_base_exchange_rate',
                            method: (index, row) => {
                                $this.addRow();
                            }
                        },
                        {
                            id: 'info',
                            icon: 'fa fa-trash-o',
                            type: 'danger',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '删除',
                            },
                            permission: 'del_base_exchange_rate',
                            method: (index, row) => {
                                $this.delRate(row, 'one');
                            }
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                }
            },
            selectionList: [],
            //编辑新增的form数据
            searchValue: '',
            baseData: {
                name: '1CNY',
                is_default: 0,
            },
            filterTypeList: [],
        }
    },
    mounted() {
        this.getList();
        this.getTypeList();
    },
    methods: {
        getTypeList() {
            let $this = this;
            let queryData = {};
            queryData.type_code_list = [ 'currency' ];
            $this.typeList = [];
            BaseAssistApi.findBaseAssistDatasFromTypesNameList(queryData, result => {
                if (result.data && result.data.currency) {
                    $this.typeList = result.data.currency.map(item => {
                        return {
                            label: item.name + '(' + item.code + ')',
                            value: item.code,
                        }
                    })
                    $this.filterTypeList = $this.typeList;
                }
            })
        },
        getList(init) {
            let $this = this;
            $this.dataList = [];
            if (init) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let queryData = $this.getQueryParams($this.tableOptions);
            queryData.currency_type = $this.searchValue;
            baseExchangeRateApi.findBaseExchangeRates(queryData, result => {
                $this.dataList = result.data || [];
                $this.resetDataList();
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            })
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        //设置序号为了删除功能
        resetDataList() {
            let $this = this;
            $this.dataList.forEach((item, index) => {
                item._index = index + 1;
            })
        },
        addRow() {
            let $this = this;
            let rowData = $.extend({}, $this.baseData, { sn: $this.dataList.length + 1 })
            $this.dataList.push(rowData);
            $this.resetDataList();
        },
        //保存/更新Unit
        batchSaveOrUpdateRate() {
            let $this = this;
            baseExchangeRateApi.batchSaveBaseExchangeRate({ list: $this.dataList }, () => {
                $this.$message.success('保存成功！');
                $this.getList();
            })
        },
        //删除
        delRate(row, type) {
            let $this = this;
            let ids = [];
            let noIdDelListStr = '';
            if (type === 'batch') {
                if ($this.selectionList.length === 0) {
                    $this.$message.error("请选中一条数据");
                    return;
                } else {
                    $this.selectionList.forEach(item => {
                        if ($this.$utils.isNotEmpty(item.id)) {
                            ids.push(item.id)
                        }
                        noIdDelListStr = noIdDelListStr + item._index + ",";
                    })
                }
            } else {
                if ($this.$utils.isNotEmpty(row.id)) {
                    ids.push(row.id)
                }
                noIdDelListStr = noIdDelListStr + row._index + ",";
            }
            $this.confirmDel(ids, noIdDelListStr);
        },
        //删除确认提示
        confirmDel(ids, noIdDelListStr) {
            let $this = this;
            $this.$confirm("是否继续删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                if (noIdDelListStr.length > 0) {
                    let list = [];
                    list = $this.dataList.filter(item => {
                        return noIdDelListStr.indexOf(item._index + ",") === -1;
                    })
                    $this.dataList = list;
                    $this.resetDataList();
                }
                if (ids.length > 0) {
                    baseExchangeRateApi.batchDelBaseExchangeRate({ ids })
                }
                $this.$message.success("删除成功");
            })
            .catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.base_rate_container {
    height: 100%;

    .buttons {
        margin: 0 0 10px 0;
    }
}
</style>
